<template>
	<view class="content">
		<view class="content-wrap">
			<scroll-view class="scrollWrap" :enhanced="true" scroll-y :bounces="false" :show-scrollbar="false">
				<view class="head">
					<image class="bg" :src="$buildFullImageUrl('/static/images/index/head.png')"></image>
					<view class="search">
						<view @click="jumpSearchPage">
							<uni-easyinput prefixIcon="search" :disabled="true" v-model="value" placeholder="搜索"></uni-easyinput>
						</view>

						<button open-type="contact" @contact="handleContact">
							<image :src="$buildFullImageUrl('/static/images/index/consultSearch.svg')"></image>
						</button>
					</view>
				</view>
				<view class="title">
					<view class="title_box" @click="moreReservation">
						<view class="title_box_image title_box_image1">
							<image :src="$buildFullImageUrl('/static/images/index/consultT.svg')"></image>
						</view>
						<view class="title_box_text">咨询</view>
					</view>
					<view class="title_box" @click="moreEvaluate">
						<view class="title_box_image title_box_image2">
							<image :src="$buildFullImageUrl('/static/images/index/evaluate.svg')"></image>
						</view>
						<view class="title_box_text">测评</view>
					</view>
					<view class="title_box" @click="handleAppointOrder">
						<view class="title_box_image title_box_image3">
							<image :src="$buildFullImageUrl('/static/images/index/appoint.svg')"></image>
						</view>
						<view class="title_box_text">预约记录</view>
					</view>
					<view class="title_box" @click="handelArticle">
						<view class="title_box_image title_box_image4">
							<image :src="$buildFullImageUrl('/static/images/index/article.svg')"></image>
						</view>
						<view class="title_box_text">文章</view>
					</view>
				</view>
				<view class="interpreter">
					<image :src="$buildFullImageUrl('/static/images/index/interpreterC.png')" class="bg"></image>
					<view class="interpreter_top"></view>
					<view class="interpreter_bot">
						<view @click="moreEvaluate" class="more">更多</view>
						<view class="interpreter_bot_wrap" v-for="(item, index) in evaluateList" :key="index">
							<image class="interpreterA1" :src="$buildFullImageUrl('/static/images/index/interpreterA1.png')"></image>
							<view class="form">
								<view class="tit">
									<image :src="$buildFullImageUrl('/static/images/index/form.svg')"></image>
									<text>{{ item.appraisalName }}</text>
								</view>
								<view class="con">{{ item.appraisalIntroduce ? item.appraisalIntroduce : '暂无' }}</view>
								<view class="btn-right" @click="itemClickDetail(item)">
									<image :src="$buildFullImageUrl('/static/images/index/btn_right.svg')"></image>
								</view>
							</view>
						</view>
						<!-- <image class="interpreterA2" src="../static/images/index/interpreterA2.png"></image>
						<view class="form" style="margin-top: 24rpx">
							<view class="tit">
								<image src="../static/images/index/form.svg"></image>
								<text>抑郁自测量表(SDS)</text>
							</view>
							<view class="con">用于评估个体一周内的抑郁情绪状态，适用于16岁以上 人群</view>
							<view class="btn-right">
								<image src="../static/images/index/btn_right.svg"></image>
							</view>
						</view> -->
					</view>
				</view>
				<view class="reservation">
					<view class="reservation_container">
						<image class="bg" :src="$buildFullImageUrl('/static/images/index/reservationC.png')"></image>
						<text class="left-top">预约咨询</text>
						<text class="right-top" @click="moreReservation">更多</text>
						<view class="dot">
							<view class="dot-det" v-for="(x, y) in dotList" :key="y">
								<view class="dot-det_top">
									<view>
										<view>{{ x.expertName }}</view>
										<view>时长：{{ x.totalConsultHours }}+</view>
										<view>从业{{ x.workingYears }}年</view>
									</view>
									<view>¥ {{ x.individualConsultCost }}</view>
								</view>
								<view class="dot-det_bot">
									<image class="dot-det_bot_per" :src="x.avatarUrl"></image>
									<view class="dot-det_bot_con">
										<image :src="$buildFullImageUrl('/static/images/index/consultBgC.png')"></image>
										<view class="dot-det_bot_con_det">
											<view>
												<view>{{ x.title }}</view>
												<view>{{ x.domainName }}</view>
											</view>
											<view @click="handelAppoint(x)">预约</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="article">
					<view class="article_title">
						<text>文章</text>
						<text @click="handelArticle">更多</text>
					</view>
					<view class="article_con">
						<view class="uni-padding-wrap">
							<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor" @clickItem="onClickItem" />
						</view>
						<view>
							<view class="article_con_con">
								<view class="det-box" v-for="(x, y) in acticleList" :key="y" @click="handelArticleDetail(x)">
									<view>
										<image :src="$fullImageUrl(x.coverImage)"></image>
									</view>
									<view>
										<view>{{ x.title }}</view>
										<view>
											<text>{{ x.author }}</text>
											<text>{{ x.publishedAt }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import { getAppraisalList, getExpertList, getHomeArticleCategoryList, getArticleList } from '@/api/index/index.js';
import config from '@/config';
export default {
	data() {
		return {
			dotList: [],
			items: [],
			articleType: [],
			articleTypeId: 0,
			activeColor: '#007aff',
			current: 0,
			acticleList: [],
			evaluateList: []
		};
	},
	onShareAppMessage() {
	  return {
	    title: '百灵心理',
	    // ...其他配置
	  };
	},
	created() {},
	onShow() {
		//查询评测首页推荐
		getAppraisalList().then((res) => {
			// console.log(res);
			this.evaluateList = res.rows;
		});
		//查询专家首页推荐
		getExpertList().then((res) => {
			this.dotList = [...res.rows];
		});
		//查询文章分类
		getHomeArticleCategoryList().then((res) => {
			// console.log(res);
			this.articleType = res.rows;
			this.articleTypeId = this.articleType[0].id;
			this.current = 0;
			this.items = this.articleType.map((p) => p.name ?? '');
			this.getArticleList();
		});
	},
	computed: {},
	methods: {
		handleContact(e) {
			console.log('客服会话触发', e.detail); // 包含sessionFrom等参数
			// 可在此处记录用户行为或上报数据
		},
		handelArticle() {
			this.$tab.navigateTo('/subset/pages/articlePage/articlePage');
		},
		onClickItem(e) {
			if (this.items[e.currentIndex] === this.articleType[e.currentIndex].name) {
				this.articleTypeId = this.articleType[e.currentIndex].id;
				this.current = e.currentIndex;
				this.getArticleList();
			}
		},
		getArticleList() {
			getArticleList({
				categoryId: this.articleTypeId
			}).then((res) => {
				this.acticleList = res.rows;
			});
		},
		handelArticleDetail(e) {
			this.$tab.navigateTo(`/subset/pages/articlePage/articleDetail?articleId=${e.id}`);
		},
		handleAppointOrder() {
			this.$tab.navigateTo(`/subset/pages/consult/search/myConsult`);
		},
		handelAppoint(e) {
			this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
		},
		moreReservation() {
			this.$tab.switchTab(`/pages/consult/index`);
		},
		moreEvaluate() {
			this.$tab.switchTab(`/pages/evaluate/index`);
		},
		itemClickDetail(item) {
			//获取点击的列表项
			this.$tab.navigateTo(`/subset/pages/evaluate/evaluateDetail?id=${item.id}`);
		},
		jumpSearchPage() {
			console.log(1111);
			this.$tab.navigateTo(`/subset/pages/search/index`);
		}
	}
};
</script>
<style scoped lang="less">
.content {
	width: 100%;
	height: 100%;

	.content-wrap {
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;

		.scrollWrap {
			width: 100%;
			height: 100%;
		}

		.head {
			width: 100%;
			height: 314rpx;
			position: relative;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
			}

			.search {
				width: 100%;
				position: absolute;
				top: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 22rpx 38rpx 22rpx 32rpx;

				::v-deep .uni-easyinput__content {
					width: 584rpx !important;
					height: 64rpx;
				}
				::v-deep .is-disabled {
					background-color: #fff !important;
				}

				::v-deep .uni-easyinput__content-input {
					padding-left: 20rpx;
				}

				::v-deep .is-input-border {
					border-radius: 34rpx;
				}

				::v-deep .uniui-search {
					font-size: 34rpx !important;
				}

				> button {
					padding: 0;
					width: 54rpx;
					height: 51rpx;
					background-color: rgba(255, 255, 255, 0.1);
					border: none;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				button:after {
					border: none;
				}
				image {
					width: 54rpx;
					height: 51rpx;
				}
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}

		.title {
			width: 100%;
			height: 204rpx;
			display: flex;

			&_box {
				width: 25%;
				height: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				padding: 42rpx 0 40rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;

				&_image {
					width: 106rpx;
					height: 46rpx;
					margin: auto;
					position: relative;
					top: 24rpx;
					border-radius: 32rpx;

					> image {
						position: absolute;

						width: 64rpx;
						height: 50rpx;
					}
				}

				.title_box_image1 {
					background: #e0f1fe;

					> image {
						width: 64rpx;
						height: 50rpx;
						bottom: 14rpx;
						left: 20rpx;
					}
				}

				.title_box_image2 {
					background: #e9f8f9;

					> image {
						width: 53rpx;
						height: 55rpx;
						bottom: 10rpx;
						left: 32rpx;
					}
				}

				.title_box_image3 {
					background: #e7f1fd;

					> image {
						width: 55rpx;
						height: 55rpx;
						bottom: 10rpx;
						left: 26rpx;
					}
				}

				.title_box_image4 {
					background: #fef3d4;

					> image {
						width: 50rpx;
						height: 49rpx;
						bottom: 18rpx;
						left: 32rpx;
					}
				}

				&_text {
					width: 100%;
					text-align: center;
				}
			}
		}

		.interpreter {
			width: 100%;
			height: 720rpx;
			background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 50%, #ffffff 100%);
			padding: 0 30rpx;
			box-sizing: border-box;
			position: relative;

			.bg {
				width: calc(100% - 60rpx);
				height: 100%;
				position: absolute;
				left: 30rpx;
			}

			&_top {
				width: 100%;
				height: 144rpx;
				position: absolute;
				left: 0;
			}

			&_bot {
				width: calc(100% - 60rpx);
				height: 576rpx;
				position: absolute;
				left: 30rpx;
				top: 144rpx;
				padding: 58rpx 20rpx 26rpx 24rpx;
				box-sizing: border-box;

				.more {
					font-weight: 400;
					font-size: 24rpx;
					color: #ffffff;
					position: absolute;
					right: 36rpx;
					top: 0px;
				}

				.interpreter_bot_wrap {
					width: calc(100% - 44rpx);
					position: absolute;
					height: 236rpx;
				}

				.interpreter_bot_wrap:last-child {
					bottom: 26rpx !important;
				}

				.interpreterA1 {
					width: 100%;
					height: 236rpx;
					position: absolute;
					left: 0;
					top: 0;
				}

				// .interpreterA2 {
				// 	width: calc(100% - 44rpx);
				// 	height: 236rpx;
				// 	position: absolute;
				// 	left: 24rpx;
				// 	bottom: 26rpx;
				// }

				.form {
					// width: calc(100% - 44rpx);
					width: 100%;
					height: 236rpx;
					// background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
					// border-radius: 8rpx;
					// border: 2px solid #ffffff;
					margin: auto;
					padding: 24rpx 44rpx 26rpx 24rpx;
					box-sizing: border-box;
					position: relative;

					> image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
					}

					.tit {
						height: 33rpx;
						display: flex;
						align-items: center;

						image {
							width: 34rpx;
							height: 33rpx;
						}

						text {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-left: 4rpx;
						}
					}

					.con {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 16rpx;
						width: 100%;
						display: -webkit-box; /* 必须结合 */
						-webkit-line-clamp: 3; /* 显示行数 */
						-webkit-box-orient: vertical; /* 方向垂直 */
						overflow: hidden; /* 隐藏溢出 */
						text-overflow: ellipsis; /* 兼容单行省略号 */
					}

					.btn-right {
						width: 72rpx;
						height: 44rpx;
						background: linear-gradient(117deg, #e2b1e8 0%, #77b8fa 47%, #597ff7 100%);
						box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
						border-radius: 22rpx;
						position: absolute;
						bottom: 15rpx;
						right: 62rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 29rpx;
							height: 33rpx;
						}
					}
				}
			}
		}

		.reservation {
			margin-top: 24rpx;
			width: 100%;
			height: 600rpx;
			padding: 0 30rpx 0 32rpx;
			box-sizing: border-box;

			&_container {
				width: 100%;
				position: relative;
				height: 100%;
				box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.1);

				.bg {
					width: 100%;
					height: 100%;
				}

				.left-top {
					position: absolute;
					top: 26rpx;
					left: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.right-top {
					position: absolute;
					top: 36rpx;
					right: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.dot {
					width: 100%;
					position: absolute;
					top: 94rpx;
					left: 0;
					padding: 0 16rpx 0 22rpx;
					box-sizing: border-box;

					.dot-det:nth-child(2) {
						margin-top: 10rpx;
					}

					.dot-det {
						width: 100%;
						height: 50%;

						// display: flex;
						// overflow: hidden;
						&_top {
							width: 100%;
							height: 76rpx;
							padding-left: 158rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;

							> view:nth-child(1) {
								width: calc(100% - 122rpx);
								padding: 24rpx 0 12rpx 34rpx;
								box-sizing: border-box;
								display: flex;
								justify-content: space-between;
								align-items: center;

								> view:nth-child(1) {
									font-weight: 600;
									font-size: 28rpx;
									color: #333333;
								}

								> view:nth-child(2) {
									background: rgba(253, 193, 78, 0.1);
									border-radius: 18rpx;
									border: 1px solid #fdba41;
									padding: 0 6rpx;
									box-sizing: border-box;
									height: 30rpx;
									line-height: 30rpx;
									font-weight: 400;
									font-size: 20rpx;
									color: #ff9300;
									text-align: center;
								}

								> view:nth-child(3) {
									background: rgba(253, 193, 78, 0.1);
									border-radius: 18rpx;
									border: 1px solid #fdba41;
									padding: 0 6rpx;
									box-sizing: border-box;
									width: 110rpx;
									height: 30rpx;
									line-height: 30rpx;
									font-weight: 400;
									font-size: 20rpx;
									color: #ff9300;
									text-align: center;
								}
							}

							> view:nth-child(2) {
								font-weight: 600;
								font-size: 28rpx;
								color: #5c83fd;
								margin-right: 6rpx;
								padding: 24rpx 0 12rpx 0;
								box-sizing: border-box;
							}
						}

						&_bot {
							width: 100%;
							height: 160rpx;
							background: linear-gradient(314deg, #7ebffe 0%, #accdff 23%, #f2d3f2 32%, #9fb3f2 44%, #e9e3f2 73%, #d9ecff 100%);
							box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
							border-radius: 20rpx;
							position: relative;
							padding: 8rpx;
							box-sizing: border-box;

							&_per {
								position: absolute;
								width: 174rpx;
								height: 232rpx;
								bottom: 0;
								left: 0;
								border-radius: 20rpx;
								border-bottom-right-radius: 0;
							}

							.dot-det_bot_con {
								width: calc(100% - 186rpx);
								position: absolute;
								height: 100%;
								right: 8rpx;
								bottom: 0rpx;
								padding: 8rpx;
								box-sizing: border-box;

								image {
									width: calc(100% - 16rpx);
									height: calc(100% - 16rpx);
									position: absolute;
									right: 8rpx;
									top: 8rpx;
								}

								&_det {
									width: calc(100% - 16rpx);
									height: calc(100% - 16rpx);
									position: absolute;
									right: 8rpx;
									top: 8rpx;
									padding: 26rpx 16rpx 10rpx 22rpx;
									box-sizing: border-box;
									display: flex;
									justify-content: space-between;
									align-items: center;

									> view:nth-child(1) {
										width: calc(100% - 154rpx);
										height: 100%;

										> view:nth-child(1) {
											font-weight: 400;
											font-size: 24rpx;
											color: #666666;
											width: 100%;

											display: -webkit-box; /* 必须结合 */
											-webkit-line-clamp: 2; /* 显示行数 */
											-webkit-box-orient: vertical; /* 方向垂直 */
											overflow: hidden; /* 隐藏溢出 */
											text-overflow: ellipsis; /* 兼容单行省略号 */
										}

										> view:nth-child(2) {
											font-weight: 400;
											font-size: 24rpx;
											color: #999999;
											margin-top: 6rpx;
											text-overflow: ellipsis;
											white-space: nowrap;
											overflow: hidden;
										}
									}

									> view:last-child {
										width: 104rpx;
										height: 44rpx;
										line-height: 44rpx;
										background: linear-gradient(117deg, #e2b1e8 0%, #77b8fa 47%, #597ff7 100%);
										box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
										border-radius: 22rpx;
										font-weight: 400;
										font-size: 24rpx;
										color: #ffffff;
										margin-left: 50rpx;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
		}

		.article {
			width: 100%;
			padding: 38rpx 30rpx 40rpx 32rpx;
			box-sizing: border-box;

			&_title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 36rpx 0 32rpx;
				box-sizing: border-box;

				> text:nth-child(1) {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				> text:nth-child(2) {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 8rpx;
				}
			}

			&_con {
				width: 100%;

				.uni-padding-wrap {
					margin-top: 26rpx;
					padding: 0 30rpx 0 30rpx;
					box-sizing: border-box;

					/deep/ .segmented-control__item--text {
						font-weight: bolder;
						font-size: 30rpx !important;
						color: #333333 !important;
					}
				}

				> view:last-child {
					width: 100%;
					margin-top: 40rpx;

					.det-box {
						width: 100%;
						height: 216rpx;
						margin-bottom: 24rpx;
						border-radius: 20rpx;
						padding: 24rpx 22rpx 22rpx 16rpx;
						box-sizing: border-box;
						display: flex;

						> view:nth-child(1) {
							width: 184rpx;
							height: 170rpx;
							border-radius: 20rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						> view:last-child {
							width: calc(100% - 184rpx);
							height: 170rpx;
							padding: 8rpx 0 2rpx 24rpx;
							box-sizing: border-box;
							display: flex;
							flex-wrap: wrap;
							align-content: space-between;

							> view:nth-child(1) {
								width: 100%;
								font-weight: 400;
								font-size: 26rpx;
								color: #333333;
							}

							> view:last-child {
								width: 100%;
								display: flex;
								justify-content: space-between;

								text {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
								}
							}
						}
					}

					.det-box:nth-child(1) {
						background: linear-gradient(to top left, #ffffff 75%, #fbe9ff 100%);
						box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
					}

					.det-box:nth-child(2) {
						background: linear-gradient(to top left, #ffffff 75%, #d9ecff 100%);
						box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
					}

					.det-box:nth-child(3) {
						background: linear-gradient(to top left, #ffffff 75%, #e4e3ff 100%);
						box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
					}

					.det-box:nth-child(4) {
						background: linear-gradient(to top left, #ffffff 75%, #fffcd9 100%);
						box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.16);
					}
				}
			}
		}
	}
}
</style>
